<template>
    <div class="index">
        <el-container>
            <el-header>
                <div class="bulletin_box flex_row align_items_center justify_content_between">
                    <div class="flex_row align_items_center bulletin_box_content">
                        <div class="flex_row align_items_center">
                            <span>最新公告</span>
                            <img class="bulletin_icon" src="../../assets/bulletin_icon.png" alt /> ：
                        </div>
                        <vue-seamless-scroll
                            :data="newsList"
                            :class-option="optionLeft"
                            class="seamless-warp2"
                            v-if="newsList.length>0"
                            @click="()=>{return false}"
                        >
                            <ul
                                class="item flex_row align_items_center"
                                @click="()=>{return false}"
                            >
                                <li
                                    v-for="(item,index) in newsList"
                                    v-text="item.title"
                                    :key="index"
                                ></li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                    <!-- <div>开奖后,记录更新预计5-30分钟</div> -->
                </div>
            </el-header>
            <el-main>
                <div class="main_content">
                    <div class="c00_bg">
                        <div
                            class="Banner c00_bg flex_row align_items_center justify_content_center"
                        >
                            <div>全能猫全网最全的猫</div>
                            <!-- <div>满足大部分用户的需求</div> -->
                        </div>
                    </div>
                    <div class="content">
                        <div class="nav">
                            <el-button
                                @click="WeekClick(index)"
                                v-for="(item,index) in weekData"
                                :key="index"
                                :size="fullWidth>750?'medium':'mini'"
                                :style="{color:currentDate === index?'#fff':'',background:currentDate === index?'#c00':'#fff'}"
                            >{{item}}</el-button>
                        </div>
                        <div class="tab" v-show="show">
                            <el-table
                                :data="tableData[currentDate].lottery_list"
                                @current-change="handleCurrentChange"
                                style="width: 100%"
                                v-loading="loading"
                                v-if="fullWidth>750"
                            >
                                <el-table-column property="name" label="彩票类型" width="150"></el-table-column>
                                <el-table-column property="time" label="开奖时间" width="100"></el-table-column>
                                <el-table-column property="last_result" label="上期结果">
                                    <template slot-scope="scope">
                                        <div
                                            class="flex_row align_items_center justify_content_between"
                                        >
                                            <div class="flex_row align_items_center">
                                                <div
                                                    v-for="(item,index) in scope.row.last_result"
                                                    :key="index"
                                                    class="flex_row align_items_center globular_item"
                                                >
                                                    <div
                                                        class="code_color"
                                                        :style="{background:item.wave==='蓝'?'blue':item.wave==='红'?'red':'green'}"
                                                    >{{item.number}}</div>
                                                    <div>{{item.value}}</div>
                                                </div>
                                            </div>
                                            <!-- <div class="flex_row align_items_center globular_item">
                                                <div class="code_color">{{scope.row.res.specialCode}}</div>
                                                <div>{{scope.row.res.txt}}</div>
                                            </div>-->
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="开奖记录" width="100">
                                    <template slot-scope="scope">
                                        <el-button
                                            @click="handleClick(scope.row)"
                                            type="text"
                                            size="small"
                                        >前往查看</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div v-else>
                                <div
                                    class="record_item"
                                    v-for="(item,index) in tableData[currentDate].lottery_list"
                                    :key="index"
                                >
                                    <div class="flex_row justify_content_between align_items_end">
                                        <div class="lottery_title">{{item.name}}</div>
                                        <div class="lottery_time">开奖时间：{{item.time}}</div>
                                        <!-- <div class="lottery_more">更多</div> -->
                                        <el-button
                                            type="danger"
                                            size="mini"
                                            class="lottery_more"
                                            @click="handleClick(item)"
                                        >更多</el-button>
                                    </div>
                                    <div class="record_item_bottom flex_row align_items_center">
                                        <div class="txt">上期结果:</div>
                                        <div class="flex_row align_items_center">
                                            <div
                                                v-for="(item,index) in item.last_result"
                                                :key="index"
                                                class="flex_row align_items_center globular_item"
                                            >
                                                <div
                                                    class="code_color"
                                                    :style="{background:item.wave==='蓝'?'blue':item.wave==='红'?'red':'green'}"
                                                >{{item.number}}</div>
                                                <div>{{item.value}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Advantage">
                    <div class="title">全能猫优势</div>
                    <div>
                        <ul :class="[fullWidth>750?'flex_row justify_content_between':'']">
                            <li>1.全网批量验证最多，专业版最高10万次</li>
                            <li>2.整理公式全网最多，可对比任何平台</li>
                            <li>3.验算速度全网最快，节约猫友宝贵时间</li>
                            <li>4.验算猫类型最全，市场有的我们都会添加</li>
                            <li>5.性价比全网最高，1只猫的价格=7只猫</li>
                            <li>6.收藏公式最保险，人人私猫各自保存</li>
                            <li>7.迭代更新能力最快，时时观察市场动向</li>
                            <li>8.批量验证次数不限制，全天候随时可验证</li>
                        </ul>
                    </div>
                </div>
            </el-main>
            <el-footer style="background:#c00" class="flex_row align_items_center">
                <div class="m_footer flex_row align_items_center justify_content_center">
                    <div>联系我们：QQ客服：408322304</div>
                    <el-button
                        type="text"
                        style="color:#fff;margin-left:10px;"
                        v-clipboard:copy="copyTxt"
                        v-clipboard:success="onCopy"
                        v-clipboard:error="onError"
                    >复制</el-button>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
const SHASHA_1_SECRET = "OK6vff3Rckog6Ye7";
export default {
    props: {},
    metaInfo() {
        return {
            title: "全能猫-首页",
            meta: [
                {
                    name: "viewport",
                    content:
                        "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
                }
            ]
        };
    },
    data() {
        return {
            copyTxt:'408322304',
            newsList: [],
            weekData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            currentDate: new Date().getDay() == 0 ? 6 : new Date().getDay() - 1,
            tableData: [
                {
                    lottery_list: []
                },
                {
                    lottery_list: []
                },
                {
                    lottery_list: []
                },
                {
                    lottery_list: []
                },
                {
                    lottery_list: []
                },
                {
                    lottery_list: []
                }
            ],
            loading: true,
            fullWidth: 750,
            show: false
        };
    },
    computed: {
        optionLeft() {
            return {
                direction: 2,
                limitMoveNum: 1
            };
        }
    },

    created() {
        window.addEventListener("resize", this.handleResize);
        setTimeout(() => {
            this.fullWidth =
                window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
            // alert('setTimeout'+this.fullWidth);

            this.show = true;
        }, 500);
        this.getWeek();
        this.$getSystem().then(data => {
            // console.log(data);
            if (data == null) {
                this.newsList = [];
            } else {
                this.newsList.push({
                    title: data.notice
                });
            }
        });
    },
    mounted() {},
    watch: {
        fullWidth(val) {
            // alert("watch" + val);
            window.addEventListener("resize", this.handleResize);
            this.fullWidth = val;
        }
    },
    methods: {
        WeekClick(e) {
            // console.log(e);
            this.currentDate = e;
        },
        handleCurrentChange() {},
        handleClick(val) {
            // console.log(val);
            this.$router.push({
                name: "record",
                query: {
                    id: val.id,
                    lotto_type: val.name
                }
            });
        },
        getWeek() {
            let rsaStr = `timestamp=${Number(new Date())}`;
            // console.log(`${SHASHA_1_SECRET}${rsaStr}`)
            let sha1Str = this.sha1(`${SHASHA_1_SECRET}${rsaStr}`);
            rsaStr = `${rsaStr}&sign=${sha1Str}`;
            // console.log(rsaStr)
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.lotteryWeek(rsaCode).then(res => {
                    // console.log(res);
                    this.loading = false;
                    if (res.data.errno === "000") {
                        this.tableData = res.data.result.data;
                    } else {
                        this.tableData = [];
                    }
                });
            });
        },
        handleResize() {
            this.fullWidth =
                window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
            // let str =
            //     window.innerWidth +
            //     "," +
            //     document.documentElement.clientWidth +
            //     "," +
            //     document.body.clientWidth;
            // alert(str);
        },
        onCopy() {
            // //console.log(this.$refs.copy.innerText)
            this.$message.closeAll();
            this.$message.success("复制成功");
        },
        onError() {
            this.$message.closeAll();
            this.$message.error("复制失败，请重试");
        },
    },
    components: {}
};
</script>

<style>
.el-header {
    background-color: #ebebeb;
    color: #333;
    /* text-align: center; */
    line-height: 60px;
}
.el-main {
    padding: 0;
}
.seamless-warp2 {
    overflow: hidden;
    height: 25px;
    width: 380px;
}
.seamless-warp2 ul.item {
    min-width: 100%;
}
.seamless-warp2 ul li {
    /* min-width: 1000px; */
    width: auto;
    line-height: 25px;
    margin-right: 30px;
    white-space: nowrap;
    color: #c00;
}
@media screen and (max-width: 750px) {
    .bulletin_box_content {
        max-width: 100%;
    }
    .seamless-warp2 {
        width: 150px !important;
        /* width: 50% !important; */
    }
    .seamless-warp2 ul.item {
        /* min-width: 50% !important; */
    }
}
.forks_ul::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}

.forks_ul::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #409eff;
}

.forks_ul::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #fff;
}
</style>
<style scoped lang="less">
@import url("./index.less");
</style>
